<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html >
	<head>
		<meta charset="UTF-8">
		<title>结构声与机械故障诊断实验室</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script> -->
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script src="js/navtab.js"></script>
		<!-- <script src="js/test.js"></script> -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
		<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> -->
	
	</head>
	<body>
		<div id="page">
			<div id="header">
				<div class="background">
					<div id="navigation">
						<ul id="nav-mainbox">
							<li>
								<a href="index.html">Home</a>
							</li>							
						</ul>
					</div>
				</div>
			</div>
			<div id = "contents">
			<div id = "body">
			<!-- <div id = "content"> -->
				<div id=tabs>
				<template>					
					<el-tabs :tab-position="tabPosition"  @tab-click="handleClick">
					  <el-tab-pane label="教师">
						
						<el-row  v-for="member in memberList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  >
							
							  <el-card :body-style="{ padding: '0px' }">
								<img v-bind:src="member.Photo" class="image" @click="DealFun6(member.Id)">								    
									<div class="text item">
									  姓名:{{ member.Name }}<br>
									  身份:{{member.Identity}}<br>
									  职称:{{member.Title}}<br>
									  研究方向:{{member.Yjfx}}<br>
									</div>								  								
							  </el-card>
							
						  </el-row>						  
					  </el-tab-pane>
					  <el-tab-pane label="博士">
						<el-row  v-for="member in memberList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  >
							
							<el-card :body-style="{ padding: '0px' }">
							  <img v-bind:src="member.Photo" class="image" >
								  
								  <div class="text item">
									姓名:{{ member.Name }}<br>
									身份:{{member.Identity}}<br>									
									研究方向:{{member.Yjfx}}<br>
								  </div>								  								
							</el-card>
						  
						</el-row>	
					  </el-tab-pane>
					  <el-tab-pane label="硕士">
						<el-row  v-for="member in memberList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  >
							
							<el-card :body-style="{ padding: '0px' }">
							  <img v-bind:src="member.Photo" class="image" >
								  
								  <div class="text item">
									姓名:{{ member.Name }}<br>
									身份:{{member.Identity}}<br>	
									研究方向:{{member.Yjfx}}<br>
								  </div>								  								
							</el-card>
						  
						</el-row>	
					  </el-tab-pane>
					  <el-tab-pane label="本科生">
						<el-row  v-for="member in memberList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  >
							
							<el-card :body-style="{ padding: '0px' }">
							  <img v-bind:src="member.Photo" class="image" >
								  
								  <div class="text item">
									姓名:{{ member.Name }}<br>
									身份:{{member.Identity}}<br>									
									研究方向:{{member.Yjfx}}<br>
								  </div>								  								
							</el-card>
						  
						</el-row>	
					  </el-tab-pane>
					  <el-tab-pane label="毕业生">
						<el-row  v-for="member in memberList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  >
							
							<el-card :body-style="{ padding: '0px' }">
							  <img v-bind:src="member.Photo" class="image" >
								  
								  <div class="text item">
									姓名:{{ member.Name }}<br>
									身份:{{member.Identity}}<br>						
									研究方向:{{member.Yjfx}}<br>
								  </div>								  								
							</el-card>
						  
						</el-row>	
					  </el-tab-pane>
					</el-tabs>
					<div class="page">
						<el-pagination						
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-size="pagesize"
						background
						layout="prev, pager, next"
						:total="memberList.length">
					  </el-pagination>
					  </div>
				  </template>
				</div>
				  <script>
					  new Vue({
					  el:'#tabs',
					  data() {
						return {
						  tabPosition: 'left',
						  currentDate: new Date(),
						  memberList:[],  
						  currentPage:1,
						  pagesize:3,                     
						};
					  },
					  methods: {
						  DealFun6(Id){
							  console.log(Id)
							var templateurl='ppage.html'
						//    var trName=document.getElementById(data[i]["ParentId"]).innerText;
							var trId = templateurl + '?id=' + Id ;         
							open(trId)    
						  },
					  handleClick(tab, event) {
						axios.post('api/member/getmemberbyidentity',{identity:tab.label} 
						).then(res=>{console.log(res.data), this.memberList=res.data
						}).catch(err=>{console.log(err)})										
						console.log(tab.label)
						},
						firstTab(){
						axios.post('api/member/getmemberbyidentity',{identity:"教师"} 
						).then(res=>{console.log(res.data), this.memberList=res.data
						}).catch(err=>{console.log(err)})																
						},
						handleCurrentChange: function(currentPage){
						this.currentPage = currentPage;
						console.log(this.currentPage)  //点击第几页
						}
						},
						mounted () {
						this.firstTab()
								}
					})
				  </script>
				<div id = "section2">
				</div>		
			</div>
			</div>
			
		</div>
		
	</body>
</html>
<style> 
	.image {
	  width: 110px;
	  height: 140px;
	  float: left;
	  margin:10px;
	  cursor: pointer;
	}
  
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}
	.text {
	font-size: 20px;
	margin:10px;
	float: left;
	width: 80%;
    }
	.page{
    /* float: center; */
    text-align:center;
    margin:0 auto;
    }


  </style>